<template>
  <BorderBox11 :title="$t('ems.fit')">
    <div class="top5">
      <!--    <div class="top5-title-th">-->
      <!--      <span>{{ $t('ems.fit') }}</span>-->
      <!--    </div>-->
      <div class="top5-content-th">
        <ul>
          <li v-for="(item,index) in props.thDataList" :key="index">
            <div
              :class="item.CurrentStatus==='InProduction'?'cicle2':item.CurrentStatus==='Running'?'cicle3':item.CurrentStatus==='PowerOn'?'cicle4':item.CurrentStatus==='BreakDown'?'cicle5':'cicle'"></div>
            <div
              :class="item.CurrentStatus==='InProduction'?'li-content2':item.CurrentStatus==='Running'?'li-content3':item.CurrentStatus==='PowerOn'?'li-content4':item.CurrentStatus==='BreakDown'?'li-content5':'li-content'">
              <span>{{ item.LineName }}</span>
              <span></span>
              <span>{{ item.Duration }}</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </BorderBox11>
</template>

<script setup>
import { defineProps, reactive, watch } from 'vue'
import { BorderBox11 } from 'datav-vue3'
import iconFont from '@/components/IconFont/iconFont'

const props = defineProps({
  title: { type: String },
  thDataList: {
    type: Array
  }
})
watch(() => [props.title, props.thDataList], () => {
  // console.log(props.thDataList)
})
</script>

<style scoped lang="scss">
.top5 {
  height: 100%;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.top5 .top5-title-th {
  width: 100%;
  background: url(@/assets/images/title.png) no-repeat center;
  background-size: 100%;
  color: #fff;
  text-align: center;
  display: table;
  font-size: 20px;
}

.top5 .top5-title-th span {
  display: table-cell;
  vertical-align: middle;
}

.top5 .top5-content-th {
  flex: 1;
  overflow: hidden;
  box-sizing: border-box;
  margin-top: 35px;
}

.top5 .top5-content-th ul {
  width: 100%;
  height: 100%;

}

.top5 .top5-content-th ul li {
  width: 50%;
  height: 100%;
  position: relative;
  display: inline-block;
}

.top5 .top5-content-th ul li .li-content {
  width: 90%;
  height: 100%;
  margin-left: 8%;
  background: url(@/assets/images/border2.png) no-repeat center;
  background-size: contain;
  font-size: 15px;
  padding-left: 17%;
  padding-top: 10%;
  color: #fff;
  box-sizing: border-box;
  overflow: hidden;
}

.top5 .top5-content-th ul li .li-content span:nth-child(1) {
  margin-right: 10px;
}

.top5 .top5-content-th ul li .cicle {
  content: '';
  display: block;
  position: absolute;
  width: 30px;
  height: 30px;
  background: url('@/assets/images/orange.png') no-repeat center;
  background-size: 100%;
  left: 0;
  bottom: 10px;
  animation: rotate 5s infinite linear;
}

.top5 .top5-content-th ul li .li-content2 {
  background: url('@/assets/images/border.png') no-repeat center;
  background-size: contain;
  width: 90%;
  height: 100%;
  margin-left: 8%;
  font-size: 15px;
  padding-left: 17%;
  padding-top: 10%;
  color: #fff;
  box-sizing: border-box;
  overflow: hidden;
}

.top5 .top5-content-th ul li .li-content3 {
  background: url('@/assets/images/border3.png') no-repeat center;
  background-size: contain;
  width: 90%;
  height: 100%;
  margin-left: 8%;
  font-size: 15px;
  padding-left: 17%;
  padding-top: 10%;
  color: #fff;
  box-sizing: border-box;
  overflow: hidden;
}

.top5 .top5-content-th ul li .li-content4 {
  background: url('@/assets/images/border4.png') no-repeat center;
  background-size: contain;
  width: 90%;
  height: 100%;
  margin-left: 8%;
  font-size: 15px;
  padding-left: 17%;
  padding-top: 10%;
  color: #fff;
  box-sizing: border-box;
  overflow: hidden;
}

.top5 .top5-content-th ul li .li-content5 {
  background: url('@/assets/images/border5.png') no-repeat center;
  background-size: contain;
  width: 90%;
  height: 100%;
  margin-left: 8%;
  font-size: 15px;
  padding-left: 17%;
  padding-top: 10%;
  color: #fff;
  box-sizing: border-box;
  overflow: hidden;
}

.top5 .top5-content-th ul li .cicle2 {
  content: '';
  display: block;
  position: absolute;
  width: 30px;
  height: 30px;
  background: url('@/assets/images/green.png') no-repeat center;
  background-size: 100%;
  left: 0px;
  bottom: 13px;
  animation: rotate 5s infinite linear;
}

.top5 .top5-content-th ul li .cicle3 {
  content: '';
  display: block;
  position: absolute;
  width: 30px;
  height: 30px;
  background: url('@/assets/images/green2.png') no-repeat center;
  background-size: 100%;
  left: 0px;
  bottom: 13px;
  animation: rotate 5s infinite linear;
}

.top5 .top5-content-th ul li .cicle4 {
  content: '';
  display: block;
  position: absolute;
  width: 30px;
  height: 30px;
  background: url('@/assets/images/blue.png') no-repeat center;
  background-size: 100%;
  left: 0;
  bottom: 13px;
  animation: rotate 5s infinite linear;
}

.top5 .top5-content-th ul li .cicle5 {
  content: '';
  display: block;
  position: absolute;
  width: 30px;
  height: 30px;
  background: url('@/assets/images/red.png') no-repeat center;
  background-size: 100%;
  left: 0;
  bottom: 13px;
  animation: rotate 5s infinite linear;
}

@keyframes rotate {
  from {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
